<template>
    <div>我今年的年龄 <input v-model.number="age" type="text" /></div>
    <div>我明年的年龄 {{ nextAge }}</div>
    <div>我后年的年龄 <input v-model.number="nextAge2" type="text" /></div>
</template>

<script setup>
import { computed, ref } from 'vue';

const age = ref(20)
// 1.引进computed，调用computed(),里面传递回调函数，返回你需要的数据即可 
// 用的比较多，必须掌握
const nextAge = computed(() => {
    return Number(age.value) + 1
})

// 用法2，传递一个对象，对象里面有set/get钩子函数，
// 一般应用在 既可以输入，也可以依赖其他数据
// get 代表获取，所以 return 你需要的数据即可
// set 代表你输入会触发的值，可以写你的业务代码
const nextAge2 = computed(
    {
        set(value) {
            age.value = value - 2
        },
        get() {
            return age.value + 2
        }
    }
)

</script>